<template>
    <div class="environment-company">
      <div class="environment-header">
        <p class="title left">环境监测</p>
        <div class="right">
          <span class="mr5">视图</span>
          <zz-select
            class="inline mr10"
            :border= true
            :options="{width: '170px'}"
            :option="themeList"
            name = '按区域/城市公司'
            @optionClick="changeView"></zz-select>
          <span class="ml10 mr5" v-if="!searchByPro">区域 </span>
          <zz-select v-if="!searchByPro"
            class="inline mr10"
            :border= true
            :options="{width: '170px'}"
            :option="areaList"
            :all = true
            name = '全部区域'
            @optionClick="changeArea">
          </zz-select>
          <span class="ml10 mr5" v-if="searchByPro">区域 </span>
          <span class="ml10 mr5" v-if="!searchByPro">项目 </span>
          <zz-search @searchClick="searchClick"></zz-search>
        </div>
      </div>

      <div class="content-header">
        <p class="left">
          <span>今日扬尘达标率</span>
          <b class="color">{{dustPassRate}}</b>
          <span>噪音达标率</span>
          <b class="color">{{noisePassRate}}</b>
        </p>

        <div class="right">
          <button class="button-block mr20 " @click="notMonitorList" v-if="!searchByPro">无监测的项目({{noneMonitorDeviceProjectNum}})</button>
          <zz-check v-if="!searchByPro"
            :check = false
            class="grid"
            fontSize="12px"
            @handleChange="handleChange"
            style="vertical-align: text-top;"
            checkTip="仅查看超标的项目">
          </zz-check>
          <span class="ml10 mr5" v-if="searchByPro">排序</span>
          <zz-select v-if="searchByPro"
            class="inline mr10"
            :border= true
            :options="{width: '170px'}"
            :option="sortList1"
            name = '监测项目数'
            @optionClick="changeSort1"></zz-select>
          <zz-select v-if="searchByPro"
            class="inline mr10"
            :border= true
            :options="{width: '170px'}"
            :option="sortList2"
            name = '降序'
            @optionClick="changeSort2"></zz-select>
            <span class="ml10 mr5" v-if="!searchByPro">排序</span>
            <zz-select v-if="!searchByPro"
              class="inline mr10"
              :border= true
              :options="{width: '170px'}"
              :option="sortList3"
              name = '按报警次数降序'
              @optionClick="changeSort3"></zz-select>
        </div>
      </div>
      <zz-table
        :title="title"
        :dataList = 'dataList'
        @handle="tableHandler">
      </zz-table>
      <zz-paginate :simple="false" :isTotalItem="false" v-if="dataList.length > 0" @choose="queryPaginate" :padding="[0, 20, 0, 0]" class="right"></zz-paginate>
      <div class="exportExcel ml20" style="line-height: 30px">
        <button class="mr10 button-block" @click="exportExcel()">导出Excel</button>
        <span>上述每小时统计一次，本次数据更新时间{{updateTime}}</span>
      </div>
      <!-- 无监测的项目弹窗 -->
      <zz-dialog
        :title = dialogTitle
        :visible = showDialog
        :showConfirm = false
        :reset = true
        :showFoot = "false"
        @close="close">
        <div class="dialog-box">
          <div style="width: 800px;">
            <div style="height: 380px" v-bar>
              <div>
                <zz-table
                  style="margin: 0 -20px 0"
                  :title="dialogTableTitle"
                  :dataList = "detailDataList">
                </zz-table>
              </div>
            </div>
            <div class="exportExcel clear" style="padding-top: 20px">
              <button class="mr10 button-block left" v-if="detailDataList.length > 0" @click="exportNoMonitorExcel()">导出Excel</button>
              <zz-paginate :simple="false" pagingId="noMonitorList" :isTotalItem="false" v-if="detailDataList.length > 0" @choose="getNoMonitorList" :padding="[0]" class="right"></zz-paginate>
            </div>
          </div>
        </div>
      </zz-dialog>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getEnvRegionInfo, getEnvInfoByProject, getNoneEnvMonitorDeviceProject } from '@/service/api.js'

export default {
    name: 'company',
    data () {
      return {
        searchByPro: false,
        themeList: {
          1: '按区域/城市公司',
          2: '按项目'
        },
        areaList: {},
        sortList1: {
          1: '监测项目数',
          2: '扬尘超标项目数',
          3: '噪音超标项目数',
          4: '温湿度超标项目数',
          5: '风速超标项目数'
        },
        sortList2: {
          1: '降序',
          2: '升序'
        },
        sortList3: {
          1: '按报警次数降序',
          2: '按报警次数升序'
        },
        title: [
          {name: '区域'},
          {name: '智慧工地项目数'},
          {name: '环境监测项目数'},
          {name: '扬尘超标项目'},
          {name: '噪音超标项目'},
          {name: '温湿度报警项目'},
          {name: '风速报警项目'},
          {name: '操作'}
        ],
        dataList: [],
        showDialog: false,
        dustPassRate: '',
        searchName: '',
        noneMonitorDeviceProjectNum: '',
        overproofProject: '',
        areaCode: '',
        updateTime: '',
        areaName: '',
        projectId: '',
        orderRule: 1,
        orderProjectRule: 1,
        orderByClause: 1,
        noisePassRate: '',
        dialogTitle: '无环境监测的项目(共0个项目)',
        dialogTableTitle: [
          {name: '序号', width: '11%', align: 'center'},
          {name: '项目名称', width: '20%', align: 'center'},
          {name: '区域', width: '15%', align: 'center'},
          {name: '项目负责人', width: '22%', align: 'center'},
          {name: '上线智慧工地时间', width: '22%', align: 'center'}
        ],
        detailDataList: []
      }
    },
    computed: {
      ...mapGetters({
        currentUser: 'currentUser'
      })
    },
    mounted () {
      this.changeView({key: "1"})  // 默认按区域/城市公司
    },
    methods: {
      changeView (item) {
        this.searchByPro = item.key === '1'
        this.filterWord = ''
        if (item.key === '1') {
          // 按区域、城市公司
          this.title = [
            {name: '区域名称', width: '13%', align: 'center'},
            {name: '智慧工地数量', width: '10%', align: 'center'},
            {name: '环境监测项目数', width: '13%', align: 'center'},
            {name: '扬尘超标项目', width: '13%', align: 'center'},
            {name: '噪音超标项目', width: '13%', align: 'center'},
            {name: '温湿度报警项目', width: '13%', align: 'center'},
            {name: '风速报警项目', width: '13%', align: 'center'},
            {name: '操作', width: '12%', align: 'center'}
          ]
        } else {
          // 按项目
          this.title = [
            {name: '区域名称', width: '10%', align: 'center'},
            {name: '项目名称', width: '16%', align: 'center'},
            {name: '今日报警次数', width: '13%', align: 'center'},
            {name: 'PM2.5', width: '9%', align: 'center'},
            {name: 'PM10', width: '9%', align: 'center'},
            {name: 'TSP', width: '9%', align: 'center'},
            {name: '噪音', width: '9%', align: 'center'},
            {name: '温湿度', width: '9%', align: 'center'},
            {name: '风速', width: '9%', align: 'center'},
            {name: '操作', width: '7%', align: 'center'},
          ]
          this.getAreaList()
        }
        this.getList(item.key)
      },
      // 监测列表
      getList (type) {
        if (type === '1') {
          // 按区域城市查询
          this.searchByCompany()
        } else {
          // 按项目查询
          this.searchByProject()
        }
      },
      searchClick (val) {
        this.searchName = val
        if (this.searchByPro) {
          this.searchByCompany()
        } else {
          this.searchByProject()
        }
      },
      // 按城市查询
      searchByCompany () {
        let data = this.getInfoByAreaQuery()
        this.$axios({
          method: 'post',
          url: `${this.$site.videoServer}/api/environmentMonitor/getInfoByArea`,
          data: this.$qs.stringify(data, {indices: false}),
          paginate: true
        }).then(res => {
          this.dustPassRate = res.data.data.dustPassRate
          this.noisePassRate = res.data.data.noisePassRate
          if (res.data.data.pageList && res.data.data.pageList.dataList.length > 0) {
            this.updateTime = this.$moment(res.data.data.pageList.dataList[0].updateTime).format('HH:mm:ss')
            this.dataList = res.data.data.pageList.dataList.map(item => {
              return {
                departmentName: item.areaName,
                zhgdProjectcount: item.zhgdProjectNum,
                projectHaveVideoNum: item.envirMonitorProjectNum,
                projectHaveAiNum: item.dustProjectNum,
                noiseProjectNum: item.noiseProjectNum,
                earlyAlarmNum: item.tempProjectNum,
                windspeedProjectNum: item.windspeedProjectNum,
                handle: [{name: '查看详情', type: 'detail', data: item}]
              }
            })
          } else {
            this.dataList = []
          }
        })
      },
      getInfoByAreaQuery () {
        return {
          areaName: this.searchName, //区域名称
          orderByType: this.orderByClause,//排序字段
          orderRule: this.orderRule  // 排序规则 1降序2升序
        }
      },
      queryPaginate () {
        if (this.searchByPro) {
          this.searchByCompany()
        } else {
          this.searchByProject()
        }
      },
      // 按项目查找
      searchByProject () {
        let data = this.getInfoByProjectQuery()
        this.$axios({
          method: 'post',
          url: `${this.$site.videoServer}/api/environmentMonitor/getInfoByProject`,
          data: this.$qs.stringify(data, {indices: false}),
          paginate: true
        }).then(res => {
          this.dustPassRate = res.data.data.dustPassRate
          this.noisePassRate = res.data.data.noisePassRate
          this.noneMonitorDeviceProjectNum = res.data.data.noneMonitorDeviceProjectNum
          if (res.data.data.pageList && res.data.data.pageList.dataList.length > 0) {
            this.updateTime = this.$moment(res.data.data.pageList.dataList[0].updateTime).format('hh:mm:ss')
            this.dataList = res.data.data.pageList.dataList.map(item => {
              return {
                departmentName: item.areaName,
                zhgdProjectcount: item.projectName,
                alarmNum: item.alarmNum,
                pmTwoPointFiveStatus: {customize: `<span style="color: ${this.getColor(item.pmTwoPointFiveStatus)}">${item.pmTwoPointFiveStatus}</span>`},
                pmTenStatus: {customize: `<span style="color: ${this.getColor(item.pmTenStatus)}">${item.pmTenStatus}</span>`},
                tspStatus: {customize: `<span style="color: ${this.getColor(item.tspStatus)}">${item.tspStatus}</span>`},
                noiseStatus: {customize: `<span style="color: ${this.getColor(item.noiseStatus)}">${item.noiseStatus}</span>`},
                tempHumidityStatus: {customize: `<span style="color: ${this.getColor(item.tempHumidityStatus)}">${item.tempHumidityStatus}</span>`},
                windspeedStatus: {customize: `<span style="color: ${this.getColor(item.windspeedStatus)}">${item.windspeedStatus}</span>`},
                handle: [{name: '查看详情', type: 'detail', data: item}]
              }
            })
          } else {
            this.dataList = []
          }
        })
      },
      getColor (status) {
        let color = ''
        switch (status) {
          case '正常':
            color = '#28ac7b'
            break
          case '无检测':
            break
          case '超标':
            color = '#fe3432'
            break
        }
        return color
      },
      getInfoByProjectQuery () {
        return {
          areaCode: this.areaCode, // 区域编码
          projectName: this.searchName, // 项目名称
          overproofProject: this.overproofProject, // 仅查看超标的项目为1
          orderRule: this.orderProjectRule // 1降序 2升序
        }
      },
      getAreaList () {
        // 获取按项目查询时候区域列表
        getEnvRegionInfo({
          memberId: this.currentUser.mid, // 登录人id
          coid: this.currentUser.coId  // 企业id
        }).then( res => {
          for (let item of res.data) {
            this.areaList[item.code] = item.departmentName
          }
        }).catch( err => {
          console.log(err)
        })
      },
      // 查看详情
      tableHandler (option) {
        this.areaCode = option.data.areaCode
        this.areaName = option.data.areaName
        this.projectId = option.data.projectId
        this.projectName = option.data.projectName
        if (!this.searchByPro) {
          this.$router.push({name: 'projectEnvironment', query: {projectId: this.projectId, projectName: this.projectName}})
        } else {
          this.$router.push({name: 'areaEnvironment', query: {areaCode: this.areaCode, areaName: this.areaName}})
        }
      },
      // 是否只查看超标的项目
      handleChange (item) {
        item ? this.overproofProject = 1 : this.overproofProject = ''
        this.searchByProject()
      },
      // 按项目查找切换区域
      changeArea (item) {
        this.areaCode = item.key
        this.searchByProject()
      },
      // 区域查找切换排序类型
      changeSort1 (item) {
        this.orderByClause = item.key
        this.searchByCompany()
      },
      // 按区域查找切换升降序
      changeSort2 (item) {
        this.orderRule = item.key
        this.searchByCompany()
      },
      // 按项目查找切换排序方式2
      changeSort3 (item) {
        this.orderProjectRule = item.key
        this.searchByProject()
      },
      // 无监测项目
      notMonitorList () {
        this.showDialog = true
        this.$nextTick(() => {
          this.getNoMonitorList()
        })
      },
      // 无监测列表
      getNoMonitorList () {
        let data = this.getNoMonitorListQuery()
        this.$axios({
          method: 'post',
          url: `${this.$site.videoServer}/api/environmentMonitor/getNoneMonitorDeviceProject`,
          data: this.$qs.stringify(data, {indices: false}),
          pagingId: 'noMonitorList',
          paginate: true
        }).then(res => {
          let {startRow} = res.data.data
          this.detailDataList = res.data.data.dataList.map((item, index) => {
            let gmtCreate = ''
            if (item.gmtCreate) {
              gmtCreate = this.$moment(item.longGmtCreate).format('YYYY-MM-DD')
            }
            return {
              index: startRow + index + 1,
              projectTitle: item.projectTitle || '--',
              departmentName: item.departmentName || '--',
              memberName: item.memberName || '--',
              videoNum: `${gmtCreate}   已${item.onlineDay}天`
            }
          })
          this.dialogTitle = `无环境监测的项目(共${res.data.data.total}个项目)`
        })
      },
      getNoMonitorListQuery () {
        return {
          mId: this.currentUser.mid,// 登录人id
          coId: this.currentUser.coId, // 企业id
          areaCode: this.areaCode // 区域编码
        }
      },
      close () {
        this.showDialog = false
      },
      exportExcel () {
        if (this.searchByPro) {
          this.$export(`${this.$site.videoServer}/api/environmentMonitor/getInfoByAreaExcel`, this.getInfoByAreaQuery())
        } else {
          this.$export(`${this.$site.videoServer}/api/environmentMonitor/getInfoByProjectExcel`, this.getInfoByProjectQuery())
        }
      },
      exportNoMonitorExcel () {
        this.$export(`${this.$site.videoServer}/api/environmentMonitor/getNoneMonitorDeviceProjectExcel`, this.getNoMonitorListQuery())
      }
    }
  }
</script>

<style scoped lang='scss'>
  .environment-company{
    .environment-header{
      height: 60px;
      line-height: 30px;
      padding: 15px 20px 17px 20px;
      box-sizing: border-box;
      border-bottom: 1px $color-line solid;
    }
    .content-header{
      height: 60px;
      padding: 20px 20px 10px 20px;
      line-height: 30px;
      box-sizing: border-box;
    }
    .content-bottom{
      padding: 0 20px;
      height: 30px;
      line-height: 30px;
    }
  }
</style>
